import mxgraph from '@/topology/mxgraph';

const {
  mxClient,
  mxConstants,
  mxEdgeHandler,
  mxEdgeStyle,
  mxEditor,
  mxEvent,
  mxGraphHandler,
  mxGuide,
  mxPerimeter,
  mxRectangleShape,
  mxUtils,
  mxConnectionHandler,
  mxImage
} = mxgraph;

export function Config(init, graphContainer) {
  let _this = this;
  if (init) {
    _this._init(graphContainer);
  }
}

/***
 * 初始化配置信息
 * @param graphContainer
 * @private
 */
Config.prototype._init = function (graphContainer) {
  let _this = this;
  if (!mxClient.isBrowserSupported()) {
    mxUtils.error('Browser is not supported!', 200, false);
  } else {
    let $graphContainer = document.getElementById(graphContainer);
    //去锯齿效果
    mxRectangleShape.prototype.crisp = true;
    // 拖动时显示导航线
    mxGraphHandler.prototype.guidesEnabled = true;
    // 拖动时，按下Alt键不显示导航线
    mxGuide.prototype.isEnabledForEvent = function (evt) {
      return !mxEvent.isAltDown(evt);
    };
    // 禁用浏览器默认的右键菜单栏
    mxEvent.disableContextMenu($graphContainer);
    // Enables snapping waypoints to terminals
    mxEdgeHandler.prototype.snapToTerminals = true;
    _this.editor = new mxEditor();
    _this.graph = _this.editor.graph;
    _this.editor.setGraphContainer($graphContainer);
    // 开启读写功能
    _this.graph.setEnabled(true);
    // 开启方块上的文字编辑功能
    _this.graph.setCellsEditable(false);
    // 可否重复连接
    _this.graph.setMultigraph(true);
    // 禁止改变元素大小
    _this.graph.setCellsResizable(false);
    // 允许连线的目标和源是同一元素
    _this.graph.setAllowLoops(true);
    // 开启拖动连线
    _this.graph.setConnectable(true);
    _this.graph.setAllowDanglingEdges(false);
    // 右键移动容器坐标轴
    _this.graph.setPanning(true);
    // 允许移动 Vertex 的 Label
    _this.graph.setVertexLabelsMovable(false);
    // 禁用节点双击，防止改变数据
    _this.graph.dblClick = function (evt, cell) {
      let model = _this.graph.getModel();
      if (model.isVertex(cell)) {
        return false;
      }
    };
    // 展示提示信息
    _this.graph.setTooltips(false);
    // 鼠标事件
    _this.mouseEvent();
    mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
  }
}

/**
 * 配置样式
 */
Config.prototype.configureStylesheet = function () {
  let graph = this.graph;
  if (graph) {
    let style = {};
    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
    style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
    style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
    style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
    style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
    style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
    style[mxConstants.STYLE_FONTCOLOR] = '#666666';
    style[mxConstants.STYLE_ROUNDED] = true;
    style[mxConstants.STYLE_OPACITY] = '80';
    style[mxConstants.STYLE_FONTSIZE] = '12';
    style[mxConstants.STYLE_FONTSTYLE] = 0;
    style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
    style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
    style[mxConstants.HIGHLIGHT_COLOR] = 'red';
    graph.getStylesheet().putDefaultVertexStyle(style);
    style = graph.getStylesheet().getDefaultEdgeStyle();
    style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
    style[mxConstants.STYLE_STROKEWIDTH] = '2';
    style[mxConstants.STYLE_ROUNDED] = true;
    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
  }
}

/**
 * 监听节点之间的连线事件
 * @param callback
 */
Config.prototype.connectionEvent = function (callback) {
  let graph = this.graph;
  graph.connectionHandler.addListener(mxEvent.CONNECT, function (sender, evt) {
    let edge = evt.getProperty('cell');
    let source = graph.getModel().getTerminal(edge, true);
    let target = graph.getModel().getTerminal(edge, false);
    graph.removeCells([edge]);
    if (callback) {
      callback(source, target);
    }
  });
}

/**
 * 鼠标监听事件
 * @author yzw
 * @date 2021/6/18 下午5:11
 */
Config.prototype.mouseEvent = function () {

}
